<template>
  <view class="u-demo-block">
    <u-scroll-list>
      <view class="scroll-list">
        <view
          class="scroll-list__line"
          v-for="(item, index) in menuArr"
          :key="index"
        >
          <view
            class="scroll-list__line__item"
            v-for="(item1, index1) in item"
            :key="index1"
            :class="[
              index1 === item.length - 1 &&
                'scroll-list__line__item--no-margin-right',
            ]"
          >
            <image
              class="scroll-list__line__item__image"
              :src="item1.icon"
              mode=""
            ></image>
            <text class="scroll-list__line__item__text">{{ item1.name }}</text>
          </view>
        </view>
      </view>
    </u-scroll-list>
  </view>
</template>

<script>
export default {
  name: "horizontalScroll",
  data() {
    return {
      menuArr: [
        [
          {
            name: "天猫新品",
            icon: "https://cdn.uviewui.com/uview/menu/11.png",
          },
          {
            name: "今日爆款",
            icon: "https://cdn.uviewui.com/uview/menu/9.png",
          },
          {
            name: "天猫国际",
            icon: "https://cdn.uviewui.com/uview/menu/17.png",
          },
          {
            name: "饿了么",
            icon: "https://cdn.uviewui.com/uview/menu/6.png",
          },
          {
            name: "天猫超市",
            icon: "https://cdn.uviewui.com/uview/menu/11.png",
          },
          {
            name: "分类",
            icon: "https://cdn.uviewui.com/uview/menu/2.png",
          },
          {
            name: "天猫美食",
            icon: "https://cdn.uviewui.com/uview/menu/3.png",
          },
          {
            name: "阿里健康",
            icon: "https://cdn.uviewui.com/uview/menu/12.png",
          },
          {
            name: "口碑生活",
            icon: "https://cdn.uviewui.com/uview/menu/7.png",
          },
        ],
        [
          {
            name: "充值中心",
            icon: "https://cdn.uviewui.com/uview/menu/8.png",
          },
          {
            name: "机票酒店",
            icon: "https://cdn.uviewui.com/uview/menu/10.png",
          },
          {
            name: "金币庄园",
            icon: "https://cdn.uviewui.com/uview/menu/18.png",
          },
          {
            name: "阿里拍卖",
            icon: "https://cdn.uviewui.com/uview/menu/15.png",
          },
          {
            name: "淘宝吃货",
            icon: "https://cdn.uviewui.com/uview/menu/16.png",
          },
          {
            name: "闲鱼",
            icon: "https://cdn.uviewui.com/uview/menu/4.png",
          },
          {
            name: "会员中心",
            icon: "https://cdn.uviewui.com/uview/menu/6.png",
          },
          {
            name: "造点新货",
            icon: "https://cdn.uviewui.com/uview/menu/13.png",
          },
          {
            name: "土货鲜食",
            icon: "https://cdn.uviewui.com/uview/menu/14.png",
          },
        ],
      ],
    };
  },
  methods: {
    setList(arr) {
      arr.forEach((item, index) => {
        if (index < 8) {
          this.$set(this.menuArr[0][index], "icon", item.icon);
        } else {
          this.$set(this.menuArr[1][index - 8], "icon", item.icon);
        }
      });
    },
  },
};
</script>

<style lang="scss">
.scroll-list {
  @include flex(column);
  &__line {
    @include flex;
    margin-top: 20rpx;

    &__item {
      margin-right: 30rpx;
      text-align: center;

      &__image {
        width: 120rpx;
        height: 96rpx;
        border-radius: 50%;
      }

      &__text {
        margin-top: 10rpx;
        color: $u-content-color;
        font-size: 24rpx;
        text-align: center;
      }

      &--no-margin-right {
        margin-right: 0;
      }
    }
  }
}
</style>
